<template>
	<view>
		<searchHeader :value='value' :fixed='fixed' @confirm='toSearch' @focus='searchInput' @back='back' @input="searchInput" ref="child"/>
		<template v-if="!inputFocus&&type=='artIndex'">
			<view style="height: 115rpx" ></view>
			<view class="title" @touchstart='titleTouchstart' @touchend='titleTouchend' style="border-bottom: 1rpx solid #EEEEEE;">
				<view v-for="(item,index) in titleList" :class="{title_active:title_active==item.type}"
				@tap="chooseTitle" :data-type='item.type'>{{item.value}}
					<view v-if="title_active==item.type"></view>
				</view>
			</view>
			<!-- 家装设计 -->
			<view class="result" v-if="title_active==designType&&resultList.length>0">
				<homeDesign v-for='(item,index) in resultList' :key='index' :message='item' :index='index' :isIndex='true' @collect='homeDesignCollect' @praise='homeDesignPraise'/>
			</view>
			<!-- 软装产品 -->
			<view class="result" v-if="title_active==softType&&softType!=2&&resultList.length>0">
				<softProducts v-for='(item,index) in resultList' :key='index' :message='item' :index='index' :isIndex='true' @collect='homeDesignCollect' @praise='homeDesignPraise'/>
			</view>
			<!-- 艺术精品 -->
			<view class="result" v-if="title_active==fineArtType&&fineArtType!=2&&resultList.length>0">
				<view style="width: 750rpx;"  :style="{height:height}">
					<xgWaterfall :columnCount="2"   :left-gap='"30rpx"' :right-gap='"30rpx"' :column-gap='"30rpx"' @success='success' :list='resultList'>
						<xgWaterfallItem  v-for='(item,index) in resultList' :key='index' >
							<fineArt :message='item' @praise='homeDesignPraise' :index='index'/>
						</xgWaterfallItem>
					</xgWaterfall>
				</view>
			</view>
			<uni-load-more status="loading"  v-if="showLoading" style="margin-top: 30rpx;"/>
			<uni-load-more status="noMore" v-if="resultList.length>0&&!showLoading&&!hasMore"  style="margin-top: 30rpx;"/>
			<view style="height: 30rpx;" v-if="resultList.length>0"></view>
		</template>
		<template v-if="!inputFocus&&type=='chooseProduct'">
			<!-- <view style="height: 25rpx"></view> -->
			<!-- <view style="height: 25rpx;background-color: #FFFFFF;position: fixed;top: 85rpx;width: 750rpx;z-index: 955;"></view> -->
			<view class="body">
				<view class="product" v-for="(item,index) in resultList" :key='index' @tap="toChooseProduct" :data-index='index'>
					<image :src="item.choose?select:notSelect" mode=""></image>
					<productLink :width='"628rpx"' :isNeedDele='false' :backgroundColor='"#FFFFFF"' :message='item'/>
				</view>
			</view>
			<view style="height: 128rpx;"></view>
			<view class="add_button" :style="{backgroundColor:canDo?'#C84739':'#C8C8C8'}" @tap="toAddProduct" >
				<text>添加</text>
			</view>
		</template>	
		<view class="noResult" v-if="resultList.length<=0&&!showLoading">
			<image src="/static/img/noResult.png" mode=""></image>
			<text>暂无搜索到相关内容</text>
		</view>
		<view class="searchTips" v-if="inputFocus">
			<rich-text class="searchTip" :nodes='item.html' v-for="(item,index) in tipList" :key='index' @tap="toClickTip"  data-type='tip' :data-state='item.state'  :data-id='item.id' :data-value='item.value'></rich-text>
		</view>
	</view>
</template>

<script>
	import urls from "@/common/util/homeArtIndex.js"
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import homeDesign from "@/components/index/homeDesign.vue"
	import softProducts from "@/components/index/softProducts.vue"
	import fineArt from "@/components/index/fineArt.vue"
	import searchHeader from "@/components/header/searchHeader.vue"
	import productLink from "@/components/ReleaseFineArt/productLink.vue"
	import xgWaterfall from "@/components/xg-waterfall/xg-waterfall.vue"
	import xgWaterfallItem from "@/components/xg-waterfall-item/xg-waterfall-item.vue"
	export default {
		components: {searchHeader,homeDesign,softProducts,fineArt,productLink,uniLoadMore,xgWaterfall,xgWaterfallItem},
		data() {
			return {
				canDo:false,
				select:require('@/static/svg/The selected.svg'),
				notSelect:require('@/static/svg/Not to choose.svg'),
				resultList:[],
				inputFocus:false,
				fixed:true,
				type:"",
				value:"",
				titleList: [],
				title_active:2,
				tipList:[],
				isFull:false,
				canChoose:0,
				state:"",
				hasMore:true,
				pageNumber:1,
				showLoading:false,
				height:0,
				designType:1,
				softType:1,
				fineArtType:1,
			};
		},
		onLoad(e) {
			this.state=e.state
			this.title_active=Number(this.state)+1
			this.type=e.type
			this.value=e.value
			if(this.type=='chooseProduct'){
				// #ifdef H5
					document.getElementsByClassName("uni-page-refresh")[0].style.display='none'
				// #endif
				this.getProducyMessage()
			}else if(this.type=='artIndex'){
				this.getMenu()
			}
		},
		onShow() {
			if(this.type=='artIndex'){
				this.pageNumber=1
				this.hasMore=true
				this.resultList=[]
				this.getIndexResult()
			}
		},
		onPullDownRefresh() {
			if(this.inputFocus||this.type=='chooseProduct'){
				uni.stopPullDownRefresh();
				return
			}
			if(this.hasMore&&this.type=='artIndex'){
				this.pageNumber+=1
				this.getIndexResult()
			}
		},
		methods: {
			async getMenu(){
				let titleList=[]
				let res=await urls.getMenu({type:0})
				for(let a=1;a<res.data.length;a++){
					titleList.push({
						type:a+1,
						value:res.data[a].content,
						state:res.data[a].state
					})
					if(res.data[a].state==1){
						this.designType=a+1
					}else if(res.data[a].state==2){
						this.softType=a+1
					}else if(res.data[a].state==3){
						this.fineArtType=a+1
					}
				}
				this.titleList=titleList
			},
			async getIndexResult(value){
				this.showLoading=true
				let index
				try{
					if(this.title_active==2){
						index=(this.titleList[Number(this.title_active)-2].state)?(this.titleList[Number(this.title_active)-2].state):1
					}else{
						index=this.title_active-1
					}
				}catch(e){
					if(this.title_active==2){
						index=1
					}else{
						index=this.title_active-1
					}	
					//TODO handle the exception
				}
				let data={}
				if(value){
					this.value=value
				}
				data.value=this.value
				data.userId=localStorage.getItem("userId")
				data.page=this.pageNumber
				let res
				switch (index){
					case 1:
					case '1':
						data.count=5
						res=await urls.searchDesign(data)
						break;
					case 2:
					case '2':
						data.count=5
						res=await urls.searchSoft(data)
						break;
					case 3:
					case '3':
						data.count=10
						res=await urls.searchFine(data)
						break;		
					default:
						break;
				}
				if(res.data.hasMore==0){
					this.hasMore=false
				}else{
					this.hasMore=true
				}
				if(res.data.list){
					this.resultList.push.apply(this.resultList,res.data.list)
				}
				this.showLoading=false
			},
			getProducyMessage(){
				let message=localStorage.getItem("releaseFineArtMessage")?JSON.parse(localStorage.getItem("releaseFineArtMessage")):{}
				if(message.linkList){
					this.canChoose=10-message.linkList.length
					if(this.canChoose==0){
						this.isFull=true
					}
				}
				this.resultList=[{
						"shopLink":"421rrv12412v42",
						"shopImage":"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3663179458,4263162468&fm=15&gp=0.jpg",   
						"shopContent":"这是商品1号",  
						"shopPrice":99.99,
					},
					{
						"shopLink":"4v124v12c",
						"shopImage":"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3548804822,3650468119&fm=15&gp=0.jpg",
						"shopContent":"这是商品1号",
						"shopPrice":50.6,
					}]
				for(let a=0;a<this.resultList.length;a++){
					this.resultList[a].choose=false
				}
			},
			back(){
				if(this.inputFocus){
					this.inputFocus=false
					this.$refs.child.keyword=this.value
					this.$nextTick(()=>{
						this.inputFocus=false
					})
				}else{
					uni.navigateBack({
						delta: 1
					})
				}
			},
			searchInput(value){
				if(value){
					this.getTips(value)
					this.inputFocus=true
				}else{
					this.inputFocus=false
				}
			},
			success(e){
				this.height=e+'px'
			},
			async getTips(value){
				let res=await urls.searchTitle({keyWord:value})
				let tipList=[]
				for(let a=0;a<res.data.length;a++){
					tipList.push({
						value:res.data[a].title.replace(/<em>/g,"").replace(/<\/em>/g,""),
						html:res.data[a].title.replace(/<em>/g,"<span style='color:#333333'>").replace(/<\/em>/g,"</span>"),
						id:res.data[a].id,
						state:res.data[a].state
					})
				}
				this.tipList=tipList
			},
			titleTouchstart(e){
				this.startX=e.changedTouches[0].clientX
				this.startY=e.changedTouches[0].clientY
			},
			titleTouchend(e){
				if(e.changedTouches[0].clientY-this.startY>45||this.startY-e.changedTouches[0].clientY>45){
					return
				}
				if(e.changedTouches[0].clientX-this.startX>50){
					if(this.title_active==4){
						this.title_active=2
						this.pageNumber=1
						this.hasMore=true
						this.resultList=[]
						this.getIndexResult()
					}else{
						this.title_active+=1
						this.pageNumber=1
						this.hasMore=true
						this.resultList=[]
						this.getIndexResult()
					}
				}else if(this.startX-e.changedTouches[0].clientX>50){
					if(this.title_active==2){
						this.title_active=4
						this.pageNumber=1
						this.hasMore=true
						this.resultList=[]
						this.getIndexResult()
					}else{
						this.title_active-=1
						this.pageNumber=1
						this.hasMore=true
						this.resultList=[]
						this.getIndexResult()
					}
				}
			},
			chooseTitle(e){
				if(this.title_active!=e.currentTarget.dataset.type){
					this.title_active=e.currentTarget.dataset.type
					this.pageNumber=1
					this.hasMore=true
					this.resultList=[]
					this.getIndexResult()
				}
			},
			toClickTip(e){
				this.toSearch(e.currentTarget.dataset.value)
				if(e.currentTarget.dataset.type=='tip'){
					urls.userCount({
						id:e.currentTarget.dataset.id,
						state:e.currentTarget.dataset.state
					})
				}
			},
			toSearch(value){
				let historyList=localStorage.getItem(this.type+"searchHistory")?JSON.parse(localStorage.getItem(this.type+"searchHistory")):[]
				for(let a=0;a<historyList.length;a++){
					if(historyList[a]==value){
						historyList.splice(a,1)
						break
					}
				}
				historyList.unshift(value)
				localStorage.setItem((this.type+"searchHistory"),JSON.stringify(historyList))
				this.pageNumber=1
				this.hasMore=true
				this.resultList=[]
				this.inputFocus=false
				this.getIndexResult(value)
			},
			toChooseProduct(e){
				let a=Number(e.currentTarget.dataset.index)
				if(this.isFull&&!this.resultList[a].choose){
					return
				}
				if(this.resultList[a].choose){
					this.canChoose+=1
				}else{
					this.canChoose-=1
				}
				if(this.canChoose==0){
					this.isFull=true
				}else{
					this.isFull=false
				}
				this.resultList[a].choose=!this.resultList[a].choose
				this.$forceUpdate()
				let canDo=false
				for(let c=0;c<this.resultList.length;c++){
					if(this.resultList[c].choose){
						canDo=true
						break
					}
				}
				this.canDo=canDo
			},
			toAddProduct(){
				if(!this.canDo){
					return
				}
				let chooseList=[]
				for(let c=0;c<this.resultList.length;c++){
					if(this.resultList[c].choose){
						chooseList.push(this.resultList[c])
					}
				}
				let message=localStorage.getItem("releaseFineArtMessage")?JSON.parse(localStorage.getItem("releaseFineArtMessage")):{}
				message.linkList=message.linkList?message.linkList:[]
				message.linkList=message.linkList.concat(chooseList)
				localStorage.setItem('releaseFineArtMessage',JSON.stringify(message))
				uni.navigateBack({
					delta: 2
				})
			},
			homeDesignCollect(index,isAlready){
				if(!isAlready){
					this.resultList[index].collection="1"
					this.resultList[index].collectionNumber-=1
				}else{
					this.resultList[index].collection="0"
					this.resultList[index].collectionNumber+=1
				}	
			},
			homeDesignPraise(index,isAlready){
				if(!isAlready){
					this.resultList[index].zan="1"
					this.resultList[index].zanNumber-=1
				}else{
					this.resultList[index].zan="0"
					this.resultList[index].zanNumber+=1
				}	
			},
		},
		
	}
</script>

<style lang="scss">
page{
	background-color:#F7F7F7 ;
}
.title{
	position: fixed;
	width: 670rpx;
	top: 88rpx;
	left: 0;
	z-index: 997;
	background-color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 90rpx;
	box-sizing: content-box;
	padding: 25rpx 40rpx 0;
	view{
		line-height:90rpx ;
		font-size: 28rpx;
		letter-spacing: 1rpx;
		color: #AEA8A2;
	}
	.title_active{
		font-weight: bold;
		color: #333333;
		font-size: 34rpx;
		position: relative;
		view{
			height: 6rpx;
			width: 34rpx;
			border-radius: 4.5rpx;
			background-color: #333333;
			position: absolute;
			bottom:0 ;
			left: 0;
		}
	}
}
.noResult{
	display: flex;
	flex-flow: column;
	align-items: center;
	padding-top: 343rpx;
	image{
		height: 289rpx;
		width: 374rpx;
		display: block;
	}
	text{
		font-size: 30rpx;
		color: #333333;
		letter-spacing: 1rpx;
		margin-top: 60rpx;
	}
}
.artResult{
	display: flex;
	flex-wrap: wrap;
}
.searchTips{
	position: fixed;
	height: 100%;
	width: 750rpx;
	background-color: #FFFFFF;
	top:88rpx ;
	overflow-y: auto;
	left: 0;
	z-index: 997;
	padding: 0 30rpx;
	.searchTip{
		height: 90rpx;
		border-bottom: 1rpx solid #EEEEEE;
		display: flex;
		align-items: center;
		font-size: 30rpx;
		color:#999999;
		letter-spacing: 1rpx;
	}
}
.body{
	.product{
		display: flex;
		align-items: center;
		image{
			height: 42rpx;
			width: 42rpx;
			margin: 0 20rpx 0 30rpx;
		}
	}
}
.add_button{
	height: 98rpx;
	width: 750rpx;
	position: fixed;
	z-index: 10;
	bottom: 0;
	left: 0;
	background-color: #C84739;
	display: flex;
	align-items: center;
	justify-content: center;
	text{
		color: #FFFFFF;
		font-size: 34rpx;
		letter-spacing: 1rpx;
	}
}
</style>
